1
00:00:00,210 --> 00:00:03,300
Now let's create a preview frame on the right.

2
00:00:03,300 --> 00:00:08,520
And when you click one of the items, it's going to show the image, the name, the price, and then

3
00:00:08,520 --> 00:00:09,890
a buy button.

4
00:00:09,900 --> 00:00:12,370
So we're going to go to our starter gooey.

5
00:00:12,390 --> 00:00:20,310
Open that up screen gooey shop frame and we have our items frame here.

6
00:00:20,550 --> 00:00:26,070
Let's go to the shop frame, hit the plus, add a regular frame.

7
00:00:26,070 --> 00:00:30,750
This is going to be our I'll call it to buy frame.

8
00:00:30,930 --> 00:00:31,240
Right.

9
00:00:31,260 --> 00:00:32,880
But it's the preview.

10
00:00:32,880 --> 00:00:36,060
But we're also going to hit we're going to have the buy button on there.

11
00:00:36,420 --> 00:00:36,720
All right.

12
00:00:36,720 --> 00:00:38,910
So we're going to change some things on that.

13
00:00:40,200 --> 00:00:43,860
I'm going to keep my background color white until I'm finished.

14
00:00:43,980 --> 00:00:45,450
Let's go to possession.

15
00:00:45,450 --> 00:00:58,890
So at 0000, let's move that out to 0.5 on the x zero pixel offset down to 0.1 on the Y to compensate

16
00:00:58,890 --> 00:01:09,360
for the top bar to zero pixel offset and then for the size on the x will make that 50% of the x, so

17
00:01:09,360 --> 00:01:19,020
half of the window zero pixel offset and then 0.9 for the Y because 0.1 is for the top bar.

18
00:01:19,680 --> 00:01:20,520
There we go.

19
00:01:20,520 --> 00:01:22,560
Now we can put stuff on here.

20
00:01:22,770 --> 00:01:31,530
I'm going to add hit the plus, add a UI list layout so I don't have to mess around with my positioning

21
00:01:31,530 --> 00:01:37,380
as much and then I'm going to get hit the plus sign on the two by frame.

22
00:01:37,380 --> 00:01:38,700
One more time.

23
00:01:39,120 --> 00:01:41,360
I need an image label.

24
00:01:41,370 --> 00:01:42,810
There we go right there.

25
00:01:43,740 --> 00:01:50,490
So my image label, I think I'll just call this image LBL.

26
00:01:53,190 --> 00:01:57,090
Let's make sure we maintain our aspect ratio.

27
00:01:57,210 --> 00:02:00,870
I'll change the size of the image label to be scale.

28
00:02:01,050 --> 00:02:02,520
So go to size.

29
00:02:03,270 --> 00:02:05,160
Let's do 40%.

30
00:02:05,160 --> 00:02:10,650
So 0.40.4 comma zero.

31
00:02:11,610 --> 00:02:15,910
And then hit the plus sign on the image label.

32
00:02:15,930 --> 00:02:19,530
We have that UI aspect ratio.

33
00:02:20,440 --> 00:02:21,010
Here we go.

34
00:02:21,010 --> 00:02:29,650
On the UI aspect ratio, the dominant access axes is the Y, the width or not, the y, the x, the

35
00:02:29,650 --> 00:02:30,370
width.

36
00:02:30,910 --> 00:02:35,350
Let's go to aspect type scale with parent.

37
00:02:36,250 --> 00:02:37,630
I think that's pretty good.

38
00:02:37,660 --> 00:02:39,490
Now I want to center this.

39
00:02:39,490 --> 00:02:44,470
So rather than messing around with the position because we have the UI list layout.

40
00:02:44,770 --> 00:02:49,000
I'm going to click the UI list layout, horizontal alignment.

41
00:02:50,200 --> 00:02:51,520
Let's make that.

42
00:02:52,280 --> 00:02:56,930
Center and then vertical alignment.

43
00:02:58,240 --> 00:03:00,070
I'm going to center that, too.

44
00:03:00,400 --> 00:03:03,520
And then as we add stuff below it, it's going to move up.

45
00:03:03,790 --> 00:03:08,270
So let's go to our two by frame.

46
00:03:08,290 --> 00:03:09,520
Hit the plus.

47
00:03:09,550 --> 00:03:13,060
We're going to need a text label for our item name.

48
00:03:13,690 --> 00:03:14,440
There we go.

49
00:03:14,440 --> 00:03:17,200
And we'll call this item name.

50
00:03:20,980 --> 00:03:23,400
And let's change the size of that.

51
00:03:24,830 --> 00:03:27,150
Right here in their size.

52
00:03:27,170 --> 00:03:35,390
I'll do 0.8 on the x zero pixel offset 0.1 on the Y zero pixel offset.

53
00:03:36,140 --> 00:03:38,450
And you can see that there's no spacing.

54
00:03:38,450 --> 00:03:39,840
We can change that.

55
00:03:39,860 --> 00:03:42,890
Let's go to our UI list layout again.

56
00:03:42,980 --> 00:03:54,260
And then I'm going to scroll up to where it says padding, and maybe I'll do scale, do a 0.01.

57
00:03:54,590 --> 00:03:56,000
That's a little bit of padding.

58
00:03:56,000 --> 00:03:58,190
We might want to put a little bit more in there.

59
00:03:58,250 --> 00:04:00,560
Maybe 0.02 will do it.

60
00:04:00,560 --> 00:04:00,890
That's.

61
00:04:00,890 --> 00:04:01,940
That's fine.

62
00:04:02,510 --> 00:04:03,050
All right.

63
00:04:03,050 --> 00:04:06,380
And let's go back to our item name.

64
00:04:06,890 --> 00:04:10,340
I think I'm going to call that name label instead.

65
00:04:11,030 --> 00:04:13,370
Name label.

66
00:04:14,570 --> 00:04:16,850
That's a little bit clearer, I think.

67
00:04:17,390 --> 00:04:17,780
All right.

68
00:04:17,780 --> 00:04:19,850
Let's take a look at what we got here.

69
00:04:20,960 --> 00:04:29,030
I think I'm going to change the background transparency for that label to one so we don't see the background.

70
00:04:29,420 --> 00:04:30,890
And then.

71
00:04:31,740 --> 00:04:32,910
Size is good.

72
00:04:32,910 --> 00:04:33,570
We did that.

73
00:04:33,570 --> 00:04:36,450
We need to change the font font face.

74
00:04:36,570 --> 00:04:44,550
Let's change that to that comic that we've been using and I'll just hit the text scale for the size.

75
00:04:45,300 --> 00:04:46,440
I think that'll work.

76
00:04:47,010 --> 00:04:48,360
I'm going to duplicate this.

77
00:04:48,360 --> 00:04:53,550
I'm going to hit a control D and then this one is going to be the price label.

78
00:04:57,610 --> 00:05:00,070
Lot of work and.

79
00:05:01,050 --> 00:05:03,540
Let's clear these texts out.

80
00:05:03,540 --> 00:05:06,270
Let's hit the text on the price label.

81
00:05:07,200 --> 00:05:08,160
Nothing.

82
00:05:08,370 --> 00:05:10,950
It's good to know where they're at because they're invisible now.

83
00:05:10,950 --> 00:05:11,550
Right.

84
00:05:11,550 --> 00:05:15,630
And then text nothing.

85
00:05:16,500 --> 00:05:17,640
I'm going to add a button.

86
00:05:17,640 --> 00:05:19,290
That's going to be the buy button.

87
00:05:20,670 --> 00:05:21,720
Text button.

88
00:05:22,590 --> 00:05:22,910
Right.

89
00:05:22,910 --> 00:05:25,460
And then we need to change the name of that.

90
00:05:25,460 --> 00:05:29,420
Let's call that bye button.

91
00:05:30,540 --> 00:05:32,670
Maybe make that color green.

92
00:05:33,720 --> 00:05:34,680
Green means go.

93
00:05:34,680 --> 00:05:35,280
Right.

94
00:05:36,400 --> 00:05:37,460
Cool.

95
00:05:37,510 --> 00:05:39,280
I won't change the size.

96
00:05:40,570 --> 00:05:42,490
I'll make this like 0.6.

97
00:05:42,490 --> 00:05:45,970
Let's make that 0.6 on the x zero pixel offset.

98
00:05:46,000 --> 00:05:47,290
How big did we make?

99
00:05:47,290 --> 00:05:50,090
The labels was a 0.4.

100
00:05:50,110 --> 00:05:52,390
Maybe we'll do 0.2.

101
00:05:53,020 --> 00:05:55,450
I think I did 0.1 on the labels.

102
00:05:56,460 --> 00:05:59,260
Yeah, that's pretty big.

103
00:05:59,280 --> 00:06:03,900
I think that's good, though, because don't forget, you have to click the button and if it's on a

104
00:06:03,900 --> 00:06:06,000
mobile, you need it to be big enough.

105
00:06:06,000 --> 00:06:08,470
These other things you could probably read.

106
00:06:08,490 --> 00:06:09,870
No problem.

107
00:06:10,820 --> 00:06:12,230
Let's scroll down.

108
00:06:12,230 --> 00:06:16,010
We've got to change our our font comic.

109
00:06:16,820 --> 00:06:18,260
And.

110
00:06:19,360 --> 00:06:22,390
Text we could change this by.

111
00:06:24,360 --> 00:06:26,010
I will make the text scale.

112
00:06:26,730 --> 00:06:27,540
There we go.

113
00:06:27,570 --> 00:06:31,500
Now I'm going to change the background to my frame, my to buy frame.

114
00:06:32,280 --> 00:06:34,200
Let me make it the same as this background.

115
00:06:34,200 --> 00:06:42,450
So maybe just go to my items, frame, scroll up and get the items.

116
00:06:42,450 --> 00:06:45,390
Frame is invisible.

117
00:06:45,420 --> 00:06:47,650
I'm just going to have to change it by hand.

118
00:06:47,670 --> 00:06:50,230
Did I remember what it was?

119
00:06:50,250 --> 00:06:52,720
I think I did two by frame.

120
00:06:52,740 --> 00:06:54,360
I went to Purple.

121
00:06:56,980 --> 00:06:59,470
And then I change that color a little bit, didn't I?

122
00:06:59,470 --> 00:07:05,170
I changed it to 202 hundred on the red and the green.

123
00:07:08,040 --> 00:07:09,090
That's right.

124
00:07:09,720 --> 00:07:10,350
Nice.

125
00:07:10,350 --> 00:07:12,810
And then we have those two labels right here we can't see.

126
00:07:12,810 --> 00:07:13,500
But that's all right.

127
00:07:13,500 --> 00:07:16,110
We're going to add some code and then you're going to be able to see it.

128
00:07:16,110 --> 00:07:17,850
Let's just take a look.

129
00:07:18,240 --> 00:07:20,670
Let's just take a look at what happens if we squish it.

130
00:07:22,090 --> 00:07:23,350
That's not too bad.

131
00:07:24,740 --> 00:07:29,390
And then maybe add the output window, squished it that way.

132
00:07:29,600 --> 00:07:30,830
Yeah, that's not bad.

133
00:07:30,830 --> 00:07:31,690
That's not bad.

134
00:07:31,700 --> 00:07:34,100
Let's add some let's add some code now.

135
00:07:34,100 --> 00:07:40,670
So when we press the button, we'll get the image, we'll get the name, we'll get the price, and maybe

136
00:07:40,670 --> 00:07:44,030
write the button, print out for it.

137
00:07:45,310 --> 00:07:50,320
Now let's add some code to our shop so we can preview the items when we press the button.

138
00:07:50,320 --> 00:07:56,890
Let's go to we're under starter gooey screen, gooey shop, frame shop script.

139
00:07:56,890 --> 00:07:59,620
And here's my button table right here.

140
00:07:59,620 --> 00:08:00,730
Underneath the button table.

141
00:08:00,730 --> 00:08:02,680
I'm going to add a few variables.

142
00:08:02,680 --> 00:08:07,630
I'm going to add one called preview image.

143
00:08:08,860 --> 00:08:17,470
I'll just do IMG shop frame to buy frame and item.

144
00:08:17,470 --> 00:08:21,070
What do I call that item image or image image label.

145
00:08:21,070 --> 00:08:22,060
That's what it was.

146
00:08:22,060 --> 00:08:23,830
And then I need another one.

147
00:08:24,010 --> 00:08:38,320
Preview name shot frame two by frame, name label and finally preview price shot.

148
00:08:38,320 --> 00:08:43,600
Frame two by frame and with that price label.

149
00:08:43,600 --> 00:08:47,440
So I'm basically just making variables because this is too long to type in.

150
00:08:48,010 --> 00:08:48,400
All right.

151
00:08:48,400 --> 00:08:55,150
And this is where we loop through all of our buttons and we are going to get our activated event connected

152
00:08:55,150 --> 00:08:59,890
to this preview item function passing in the button, right?

153
00:08:59,890 --> 00:09:03,160
Because on the button we're going to need.

154
00:09:04,860 --> 00:09:11,700
I image ID, item, name and price so that we can get the text that we want and then we could display

155
00:09:11,700 --> 00:09:13,150
the stuff we want in our preview.

156
00:09:13,170 --> 00:09:15,510
So let's do a local function.

157
00:09:16,420 --> 00:09:17,070
I always do that.

158
00:09:17,070 --> 00:09:23,150
I preview item and the buttons are going to be passed and I'll just call BTN.

159
00:09:23,160 --> 00:09:28,410
Just make sure that this preview item doesn't clash with anything up here because you'll mess up the

160
00:09:28,410 --> 00:09:30,180
variable with the function name.

161
00:09:30,600 --> 00:09:35,580
And once we get that, let's do our let's get our preview image right.

162
00:09:35,580 --> 00:09:44,220
We're going to get our preview image, and that has a dot image property and that's going to get this

163
00:09:44,220 --> 00:09:47,310
value right here for each individual button.

164
00:09:47,520 --> 00:09:56,130
So we have our BTN image ID, dot value is going to go into that property right there.

165
00:09:56,280 --> 00:10:00,960
We'll get our preview name and that is a text field.

166
00:10:00,960 --> 00:10:05,820
So we're going to update the text button has that string called item name.

167
00:10:06,600 --> 00:10:08,920
I should have kept those names a little more consistent.

168
00:10:08,940 --> 00:10:17,010
That's a value preview Price text button dot.

169
00:10:17,610 --> 00:10:19,290
I just called it price.

170
00:10:20,730 --> 00:10:21,030
All right.

171
00:10:21,030 --> 00:10:31,390
So these these should match price to price item named item name, image ID, image ID, and these are

172
00:10:31,410 --> 00:10:33,120
UI component names.

173
00:10:33,120 --> 00:10:34,500
I think that looks good.

174
00:10:35,520 --> 00:10:41,630
Now we can go ahead and uncomment this out and let's go ahead and test it.

175
00:10:41,640 --> 00:10:42,930
Let's hit the play button.

176
00:10:48,020 --> 00:10:48,800
There's a little guy.

177
00:10:48,830 --> 00:10:53,390
Let's pop that thing open and simple pistol.

178
00:10:54,290 --> 00:10:57,380
Well, we got the simple pistol name and we got the price right.

179
00:10:57,380 --> 00:10:59,360
But the image is wrong.

180
00:10:59,390 --> 00:11:00,330
Let's try this one.

181
00:11:00,440 --> 00:11:01,450
Oh, so they're flipped.

182
00:11:01,460 --> 00:11:02,630
I flipped my images.

183
00:11:02,630 --> 00:11:03,310
That's all right.

184
00:11:03,320 --> 00:11:05,120
Let's go back and fix that.

185
00:11:05,910 --> 00:11:06,960
Hit the stop.

186
00:11:08,130 --> 00:11:13,020
Let's go out to server storage, not server storage, replicated storage.

187
00:11:13,020 --> 00:11:17,120
That's where we have our our fabulous lemon and our simple pistol.

188
00:11:17,130 --> 00:11:19,640
Let's open the fabulous lemon.

189
00:11:19,650 --> 00:11:21,930
Actually, we don't even need to open it.

190
00:11:21,930 --> 00:11:23,460
Just press fabulous.

191
00:11:23,460 --> 00:11:30,240
LEMON And then under the texture ID, just click that and then we'll copy it.

192
00:11:30,420 --> 00:11:31,110
There we go.

193
00:11:31,110 --> 00:11:34,380
Control C and I click that again to close it.

194
00:11:34,500 --> 00:11:38,310
I'm going to go down to this is one item.

195
00:11:38,310 --> 00:11:39,180
What item is that?

196
00:11:39,180 --> 00:11:40,740
That's simple pistol.

197
00:11:40,740 --> 00:11:42,720
I need to go to the fabulous.

198
00:11:42,720 --> 00:11:43,680
LEMON Right.

199
00:11:43,980 --> 00:11:45,030
That's fabulous.

200
00:11:45,030 --> 00:11:46,290
LEMON All right.

201
00:11:46,290 --> 00:11:52,020
So I'm going to go to my item, our image idea of my fabulous lemon control V.

202
00:11:52,050 --> 00:11:52,920
There we go.

203
00:11:52,920 --> 00:11:55,980
Now, I got to get the pistol for the one above.

204
00:11:56,720 --> 00:11:58,170
Simple pistol.

205
00:11:58,190 --> 00:11:59,240
There it is.

206
00:12:00,310 --> 00:12:02,290
Grab that control C.

207
00:12:03,640 --> 00:12:07,620
An item name is simple pistol.

208
00:12:07,630 --> 00:12:07,900
Good.

209
00:12:07,900 --> 00:12:12,570
The item id change it look good.

210
00:12:12,580 --> 00:12:13,450
Let's play it.

211
00:12:21,690 --> 00:12:22,520
That's better.

212
00:12:22,530 --> 00:12:23,040
There we go.

213
00:12:23,040 --> 00:12:23,940
Simple pistol.

214
00:12:23,940 --> 00:12:24,600
Fabulous.

215
00:12:24,600 --> 00:12:26,220
Lemon, Can we close it?

216
00:12:26,220 --> 00:12:27,060
Yep.

217
00:12:27,300 --> 00:12:28,800
Let's go back to coding.